<template>
<van-loading v-if="isloading"> </van-loading>
  <van-icon  
  v-else
  :color="value? '#3296fa':'#777'" 
  :name="value? 'star':'star-o'" 
  @click="collectHandler"
  />
</template>

<script>
import {addArticleCollect,deleteArticleCollect} from '@/api/article'
export default {
  name: "CollectArticle",
  data() {
      return {
         isloading:false //是否加载中
      }
  },
  props: {
    //   是否被收藏
    value: {
      type: Boolean,
      required: true,
    },
    // 文章id 
    articleId:{
        type:[String,Number],
        required:true
    }
  },
methods: {
    // 收藏 取消收藏事件
    async collectHandler() {
         if(!this.$store.getters.token) return this.$toast.fail('请登录后再操作')
          this.isloading=true
         try {
             if(this.value) {
                 console.log(111);
                //  收藏了  要取消
                await deleteArticleCollect(this.articleId)
             }else {
                 console.log(22);
                // 未收藏 要收藏
                await addArticleCollect ({
                    target:this.articleId
                })
             }
             this.$toast.success('操作成功')
            //  更新视图
            this.$emit('input',!this.value)
         } catch (error) {
             console.log(error);
             this.$toast.fail('操作失败')
         }
         this.isloading=false
    }
},
};
</script>

<style></style>